/**
 * @description 帮助助手
*/

const dhelper = {
  // 初始化
  init (options) {
    options = options || {}
    this.options = options
    this.insertStyle()
    this.insertEl()
  },

  // 插入元素
  insertEl () {
    let el = document.querySelector('.dhelper')
    if (!el) {
      el = document.createElement('div')
      el.className = 'dhelper'
      document.body.appendChild(el)
    }
    el.innerHTML = this.getEntry() + this.getPop()
    // 入口事件
    let me = this
    el.querySelector('.dhelper-entry').onclick = function (e) {
      if (me.isActive) {
        me.isActive = false
        el.classList.remove('active')
        if (typeof me.options.onClose === 'function') {
          me.options.onClose(e, me)
        }
      } else {
        me.isActive = true
        el.classList.add('active')
        if (typeof me.options.onOpen === 'function') {
          me.options.onOpen(e, me)
        }
      }
    }
    // 单项点击事件
    let nodes = el.querySelectorAll('.dhelper-pop-item')
    if (nodes) {
      Array.from(nodes).forEach(function(node, i){
        let item = me.options.nodes[i]
        node.onclick = function (e) {
          me.isActive = false
          el.classList.remove('active')
          if (item.action === 'close') {
            me.close()
          }
          if (typeof me.options.onNodeClick === 'function') {
            me.options.onNodeClick(e, node, i, item, me)
          }
        }
      })
    }
  },

  // 插入样式
  insertStyle () {
    let style = document.querySelector('.dhelper-style')
    if (!style) {
      style = document.createElement('style')
      style.className = 'dhelper-style'
      style.setAttribute('type', 'text/css')
    }
    style.innerHTML = this.getEntryStyle() + this.getPopStyle()
    document.body.appendChild(style)
  },

  // 获取入口元素
  getEntry () {
    return '<div class="dhelper-entry" title="帮助"><svg viewBox="0 0 1024 1024"><path d="M463.99957 784.352211c0 26.509985 21.490445 48.00043 48.00043 48.00043s48.00043-21.490445 48.00043-48.00043c0-26.509985-21.490445-48.00043-48.00043-48.00043S463.99957 757.842226 463.99957 784.352211z" p-id="4515"></path><path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z" p-id="4516"></path><path d="M512 673.695256c-17.664722 0-32.00086-14.336138-32.00086-31.99914l0-54.112297c0-52.352533 39.999785-92.352318 75.32751-127.647359 25.887273-25.919957 52.67249-52.67249 52.67249-74.016718 0-53.343368-43.07206-96.735385-95.99914-96.735385-53.823303 0-95.99914 41.535923-95.99914 94.559333 0 17.664722-14.336138 31.99914-32.00086 31.99914s-32.00086-14.336138-32.00086-31.99914c0-87.423948 71.775299-158.559333 160.00086-158.559333s160.00086 72.095256 160.00086 160.735385c0 47.904099-36.32028 84.191695-71.424378 119.295794-27.839699 27.776052-56.575622 56.511974-56.575622 82.3356l0 54.112297C544.00086 659.328155 529.664722 673.695256 512 673.695256z"></path></svg></div>'
  },

  // 获取样式
  getEntryStyle () {
    return `
      .dhelper{overflow:visible;position:fixed;top:50%;right:8px;width:32px;height:32px;z-index:99;}
      .dhelper .dhelper-entry{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;background:rgba(0,0,0,0.2);border-radius:4px;color:#fff;}
      .dhelper .dhelper-entry svg{width:1em;fill:currentColor;}
      .dhelper .dhelper-pop{display:none;position:absolute;top:34px;}
      .dhelper.active .dhelper-pop{display:block;}
    `
  },

  // 获取弹出元素
  getPop () {
    let options = this.options || {}
    let nodes = options.nodes
    nodes = Array.isArray(nodes) ? nodes : []
    return '<div class="dhelper-pop">' +
      nodes.map(function(item){
        let html = '<div class="dhelper-pop-item">' + item.text + '</div>'
        if (item.url) {
          html = '<div class="dhelper-pop-item"><a href="' + item.url + '" target="_blank">' + item.text + '</a></div>'
        }
        return html
      }).join('') +
    '</div>'
  },

  // 获取弹出元素
  getPopStyle () {
    return `
      .dhelper .dhelper-pop{box-sizing:border-box;width:100%;background:#fff;border:1px solid #ddd;border-radius:4px;}
      .dhelper .dhelper-pop-item{padding:6px 2px;font-size:12px;color:#666;text-align:center;cursor:pointer;}
      .dhelper .dhelper-pop-item + .dhelper-pop-item{border-top:1px solid #ddd}
      .dhelper .dhelper-pop-item a{color:#666;text-decoration:none;}
      .dhelper .dhelper-pop-item:hover,.dhelper .dhelper-pop-item a:hover{color:#3391ff;}
    `
  },

  // 关闭
  close () {
    let el = document.querySelector('.dhelper')
    if (el) {
      el.style.display = 'none'
    }
  }
}

export default dhelper
